<template>
  <div class="map-view">
    <div id="main"></div>
  </div>
</template>

<script>
import geoJson from '@/assets/data.json'

export default {
  data () {
    return {

    }
  },
  mounted () {
    let myChart = this.$echarts.init(document.getElementById('main'))
    // 注册可用地图
    this.$echarts.registerMap('china', geoJson)
    let option = {
      backgroundColor: 'rgba(178, 200, 187, 0.7)',
      geo: {
        map: 'china',
        // 地图长宽比
        aspectScale: 0.75,
        zoom: 1.1,
        regions: [{
          name: '南海诸岛'
        }],
        label: {
          normal: {
            show: true,
            color: '#fff',
            position: 'top',
          }
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgb(182, 194, 154)'
                }, {
                  offset: 1,
                  color: 'rgb(138, 151, 123)'
                }
              ]
            },
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10,
          },
          zlevel: -1
        }
      },
      // 配置地图相关参数
      series: [
        {
          type: 'map',
          zoom: 1.1,
          map: 'china',
          label: {
            normal: {
              show: true,
              color: '#fff',
              position: 'top',
            }
          },
          itemStyle: {
            normal: {
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(131, 178, 76)'
                  }, {
                    offset: 1,
                    color: 'rgb(131, 200, 100)'
                  }
                ],
                globalCoord: true
              }
            }
          }
        }
      ]
    }
    myChart.setOption(option)
  }
}
</script>

<style lang="less">
.map-view {
  width: 100%;
  #main {
    width: 100%;
    height: 600px;
    text-align: center;
  }
}
</style>